<!--
 * @FileDescription: 评论组件
 * @Author: cjw
 * @Date: 2022/1/24 15:20
 -->
<template>
  <div>
    <Divider></Divider>
    <el-row style="text-align: center">
      <el-col :span="4" style="text-align: center">
        <el-avatar :size="50" :src="selfHeadImage"></el-avatar>
      </el-col>
      <el-col :span="18" style="text-align: center">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="在此输入评论内容..."
          v-model="textarea">
        </el-input>
      </el-col>
    </el-row>
    <div style="text-align: right;margin-right: 100px">
      <el-button rows="50" type="success" size="mini" @click="addParentComment">发布</el-button>
    </div>
    <br/>
    <br/>
    <p style="font-size: 20px"><strong>评论({{this.commentNum}})</strong></p>
    <Divider></Divider>
    <List v-for="(list, index) in commentData" :key="index">
      <ListItem v-for="(item, index) in list" :key="item.id">
        <ListItemMeta v-if="index === 0" :avatar="item.headImage" :title="item.userName" :description="item.context" />
        <ListItemMeta v-else style="margin-left: 50px" :avatar="item.headImage" :title="getTitle(item.userName,item.responseName)" :description="item.context" />
        <template slot="action">
          <li v-if="item.isSelf">
            <a @click="delComment(item)">删除</a>
          </li>
          <li>
            <a @click="responseComment(item,list[0])">回复</a>
          </li>
        </template>
      </ListItem>
    </List>
    <AddComment ref="addComment" @ok="handleOk"></AddComment>
  </div>
</template>

<script>
import {addParentComment, delComment, getAllComments} from "@/api/liveShare";
import {getUserHeadUrl} from '@/api/user'

export default {
  name: "comment",
  data() {
    return {
      commentData: [],
      selfHeadImage: '',
      commentNum: 0,
      textarea: ''
    }
  },
  props: ['id','type'],
  created() {
    this.flushComment()
    getUserHeadUrl().then(res => {
      this.selfHeadImage = res.body.data
    })
  },
  methods: {
    async flushComment() {
      await getAllComments(this.id, this.type).then(res => {
        this.commentData = res.body.data
      })
      this.commentNum = 0
      for(let i=0;i<this.commentData.length;i++)
        for(let j=0;j<this.commentData[i].length;j++)
          this.commentNum = this.commentNum+1
    },
    async addParentComment() {
      var comment = {
        context: this.textarea,
        liveId: this.id,
        type: this.type
      }
      await addParentComment(comment).then(res => {
        if (res.body.data) {
          this.$message.success("评论发送成功")
          this.textarea = ''
        }
        else
          this.$message.error("请重新评论")
      })
      this.flushComment()
    },
    async delComment(item) {
      var type = 1
      if (item.isParent)
        type = 0
      await delComment(item.id,type).then(res => {
        if (res.body.data)
          this.$message.success("删除成功")
        else
          this.$message.error("删除失败")
      })
      this.flushComment()
    },
    handleCancel() {
      this.close()
    },
    responseComment(item,parent) {
      if (item.isParent)
        this.$refs.addComment.add(parent.id,null)
      else
        this.$refs.addComment.add(parent.id,item.id)
    },
    getTitle(username,reponseName) {
      if (reponseName != null)
        return username+" @ "+reponseName
      return username
    },
    handleOk() {
      this.flushComment()
    }
  },
  destroyed() {
    this.commentData = []
    this.selfHeadImage = ''
    this.commentNum = 0
  }
}
</script>

<style scoped>

</style>
